<template>
  <h1>一个人的信息</h1>
  <h2>姓名:<input type="text" v-model="person.name" /></h2>
  <h2>年龄:<input type="text" v-model="person.age" /></h2>
  <h2>计算出来的值:{{ info }}</h2>
  <hr />
  <h1>直接修改计算属性返回的值</h1>
  <input type="text" v-model="info" />
</template>

<script>
import { reactive, computed } from 'vue'
export default {
  name: 'App',
  setup() {
    const person = reactive({
      name: '洪奇奇',
      age: 18,
    })
    // 这样直接修改计算属性返回的值会报警告
    /*  const info = computed(()=>{
      return person.name + '-' + person.age
    }) */

    // 正常能修改计算属性的写法
    const info = computed({
      get() {
        return person.name + '-' + person.age
      },
      set(newVal) {
        person.name = newVal.split('-')[0]
        person.age = newVal.split('-')[1]
      },
    })
    return {
      person,
      info,
    }
  },
}
</script>
